#lights.page
    h2 Lights

    ul.maingrid.small-block-grid-1.medium-block-grid-2

        li.hue
            h2 Hue lights
            <!-- ko with: hue -->
            ul.small-block-grid-2.medium-block-grid-3(data-bind="foreach: lights")
                li
                    .panel
                        h5(data-bind="text: title")
                        .inner-panel
                            div.switch
                                input(type="checkbox", data-bind="attr: {id: 'chk-hue-' + id}, checked: state, click: ayla.currentView.hueLightToggle")
                                label(data-bind="attr: {for: 'chk-hue-' + id}")
                            div.color(data-bind="visible: state")
                                input(type="text", data-bind="value: colorHex, colorPicker: true, attr: {title: title + ' colour'}, event: {change: ayla.currentView.hueLightColor}")

            <!-- /ko -->

        li.ninja
            h2 Ninja lights
            ul.small-block-grid-2.medium-block-grid-3(data-bind="foreach: ninja")
                li
                    .panel
                        h5(data-bind="text: title.replace('Light', '')")
                        .inner-panel
                            button.button.tiny.alert(data-bind="click: ayla.currentView.ninjaLightToggle") OFF
                            button.button.tiny.success(data-bind="click: ayla.currentView.ninjaLightToggle") ON

        li.all
            div
                h2 All
                div
                    button.success All ON
                    button.alert All OFF
